<template>
  <div class="bg-white full-height">
		<van-nav-bar  title="我的优惠券" left-arrow @click-left="$utils.back($route.path)" />
		<van-tabs v-model:active="active"  @change="tabChange" >
			<van-tab :title="item.title" v-for="(item,index) in tabs" :key="index">
				<div v-if="list && list.length > 0">
					<div class="usable mlr-24 mt-24 fs-24 bg-white br-24  ptb-24">
						<div class="coupon1">
							<div>
								<span class="c1_unit">￥</span><span class="c1_num">30</span>
							</div>
							<div>现金券</div>
						</div>
						<div class="coupon2">
							<p class="c2_title">满100可使用</p>
							<p class="c2_range">全场通用</p>
							<p>2023.05.15-2024.05.14</p>
						</div>
						<div class="coupon3">
							<p class="gouse color-white">去使用</p>
						</div>
					</div>
					<div class="usable mlr-24 mt-24 fs-24 bg-white br-24  ptb-24">
						<div class="coupon1">
							<div>
								<span class="c1_unit">￥</span><span class="c1_num">30</span>
							</div>
							<div>现金券</div>
						</div>
						<div class="coupon2">
							<p class="c2_title">满100可使用</p>
							<p class="c2_range">全场通用</p>
							<p>2023.05.15-2024.05.14</p>
						</div>
						<div class="coupon3">
							<p class="gouse color-white">去使用</p>
						</div>
					</div>
					<div class="unusable mlr-24 mt-24 fs-24 bg-white br-24  ptb-24">
						<div class="coupon1">
							<div>
								<span class="c1_unit">￥</span><span class="c1_num">10</span>
							</div>
							<div>现金券</div>
						</div>
						<div class="coupon2">
							<p class="c2_title">满200可使用</p>
							<p class="c2_range">全场通用</p>
							<p>2023.05.15-2024.05.14</p>
						</div>
						<div class="coupon3">
							<img src="@/assets/images/physio/used.png" />
						</div>
					</div>
				</div>
				<div v-else>
					<div class="nocoupon"><img src="@/assets/images/physio/coupon.png" /><span class="tips">暂无优惠券</span>		</div>
								
				</div>
			</van-tab>			
		</van-tabs>
  </div>
</template>
<script>
export default {
  components: {
    
  },
  props: {
  },
  data() {
    return {
			tabs:[
				{
					title:'全部',
					status:0,
				},
				{
					title:'已使用',
					status:1,
				},				
				{
					title:'已过期',
					status:2,
				},				
			],
			list: [
				{
					status:3,
				},
				{
					status:1,
				}
			]
		}
	}
}
</script>
<style lang="scss" scoped>
	.full-height{
		height: 100vh;
	}
	.usable{
		background-color: #F2F3FC;
		display: flex;
		align-items: center;
	}
		.coupon1 {
    	position: relative;
    	background:  #F2F3FC;
			display: flex;
			width: 212px;
			min-height: 120px;
			//padding: 6px 0 6px 15px;
			color: #34267F;
			//margin-top: 25px;
			align-items: center;
			display: flex;
			flex-direction: column;
			.c1_unit{
				font-size: 32px;
			}
			.c1_num{
				font-size: 64px;
			}
		}

		.coupon1::before {
				content: ' ';
				width: 0;
				height: 100%;
				position: absolute;
				border-right: 14px dotted #fff;
				top: 0;
				left: -7px;    
		}

		.coupon1::after {
				content: ' ';
				height: 100%;
				position: absolute;
				//border-bottom-right-radius: 25px dotted red;
				top: 0;
				right: -3px;    

		} 
		.coupon2{
			display: flex;
			flex-direction: column;
			color: $physio-primary1;
			width: calc(100% - 356px);
			.c2_title{
				font-size: 32px;
				font-weight: 500;
			}
			.c2_range{
				margin: 12px 0 10px 0;
			}
		}
		.coupon3{
			position: relative;
    	background:  #F2F3FC;
			display: flex;
			width: 144px;
			min-height: 120px;
			color: #34267F;
			align-items: center;
			text-align: left;
			padding-right: 48px;
		}  
		.coupon3::before {
				content: ' ';
				width: 0;
				height: 100%;
				position: absolute;
				//border-right: 6px dotted #F2F3FC;
				top: 0;
				left: -3px;    
		}

		.coupon3::after {
				content: ' ';
				height: 100%;
				position: absolute;
				border-left: 14px dotted white;
				top: 0;
				right: -7px;    

		}  
	
	.gouse{
		width: 120px;
		height: 48px;
		background: #F17FD2;
		box-shadow: 0px 4px 8px 0px rgba(67,76,103,0.21);
		border-radius: 24px;
		border: 1px solid #FFFFFF;
		text-align: center;
	}

	.unusable{
		background-color: #F2F3FC;
		display: flex;
		align-items: center;
	}

	.nocoupon{
		margin: 186px 132px 0 132px;
		position: relative;
	}
	.tips{
		position: absolute;
		top: 236px;
		left: 192px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
</style>
